<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import useMainStore from '@/store/main'
import MButton from '@/components/ManyButtons/m-button.vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import EventBus from '@/libs/EventBus'
import { modbusClose, modbusRealSim, resetFault } from '@/api'
import { oneNotify } from '@/utils/notification'
import { alarmProcessor } from '@/utils/alarmProcessor'

type ButtonType = {
  name: string
  type: ManyButtonType
  styleType?: 'primary' | 'warning' | 'danger'
  hideInShrink?: boolean
  [key: string]: any
}

export default defineComponent({
  name: 'ManyButtons',
  components: { MButton, IconAL: ArrowLeft, IconAR: ArrowRight },
  setup() {
    const store = useMainStore()
    const { manyBtnShrink: shrink } = storeToRefs(store)

    const buttons: ButtonType[] = [
      {
        name: '故障信号重置',
        type: 'reset',
      },
      {
        name: '静音模式',
        type: 'mute',
      },
      {
        name: '真实/模拟',
        type: 'real',
        sig: 0,
      },
      {
        name: '叶片断裂',
        type: 'fracture',
        hideInShrink: true,
        styleType: 'warning',
        sig: 5,
      },
      {
        name: '油膜涡动',
        type: 'oil',
        hideInShrink: true,
        styleType: 'warning',
        sig: 3,
      },
      {
        name: '汽液激振',
        type: 'vapor',
        hideInShrink: true,
        styleType: 'warning',
        sig: 4,
      },
      {
        name: '动静碰擦',
        type: 'dynamic',
        hideInShrink: true,
        styleType: 'warning',
        sig: 2,
      },
      {
        name: '转子不平衡',
        type: 'rotor',
        hideInShrink: true,
        styleType: 'warning',
        sig: 1,
      },
    ]

    function setShrink(flag?: boolean) {
      store.setManyBtnShrink(flag)
    }

    function clickHandler(type: ManyButtonType, item: ButtonType) {
      if (type === 'reset') {
        resetFault().then(() => {
          oneNotify('故障信号重置成功')
        })
      } else if (type === 'mute') {
        if (!store.isMute) {
          alarmProcessor(0)
        }
        modbusClose(!store.isMute).then(() => {
          store.setIsMute(!store.isMute)
          oneNotify(store.isMute ? '静音模式开启' : '静音模式关闭')
        })
      } else if (type === 'real') {
        modbusRealSim(!store.isReal).then(() => {
          store.setIsReal(!store.isReal)
          oneNotify(store.isReal ? '真实数据展示' : '仿真数据展示')
        })
      } else {
        if (store.isReal) {
          modbusRealSim(false).then(() => {
            store.setIsReal(false)
          })
        }
      }
      if (Object.hasOwnProperty.call(item, 'sig')) {
        store.setSig(item.sig)
      }
      /*
      if (type === 'fracture') {
        modbusBladeFracture().then(() => {
          oneNotify('仿真信号发送成功')
        })
      }
      if (type === 'oil') {
        modbusOilFilmVibration().then(() => {
          oneNotify('仿真信号发送成功')
        })
      }
      if (type === 'vapor') {
        modbusGasLiquidOscillation().then(() => {
          oneNotify('仿真信号发送成功')
        })
      }
      if (type === 'dynamic') {
        modbusDynamicStaticFriction().then(() => {
          oneNotify('仿真信号发送成功')
        })
      }
      if (type === 'rotor') {
        modbusRotorImbalance().then(() => {
          oneNotify('仿真信号发送成功')
        })
      }
      */
      EventBus.emit('manyBtnClick', type)
    }

    return { buttons, store, shrink, setShrink, clickHandler }
  },
})
</script>

<template>
  <div class="many-buttons" :class="{ shrink }">
    <button type="button" class="shrink-btn" @click="setShrink()">
      <transition mode="out-in" :duration="200">
        <el-icon v-if="shrink">
          <IconAL />
        </el-icon>
        <el-icon v-else>
          <IconAR />
        </el-icon>
      </transition>
    </button>
    <transition-group name="list">
      <template v-for="btn in buttons">
        <m-button
          :key="btn.type"
          @click="clickHandler(btn.type, btn)"
          v-if="!shrink || !btn.hideInShrink"
          :type="btn.styleType"
          :disabled="btn.sig && store.isReal"
          >{{ btn.name }}
        </m-button>
      </template>
    </transition-group>
  </div>
</template>

<style scoped lang="scss">
.many-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-color);
  border-radius: var(--common-radius) 0 0 var(--common-radius);
  height: var(--many-btn-height);
  padding: 0 20px;
  will-change: auto;
  transition: all 0.25s ease-in-out;

  &.shrink {
    padding-right: 30px;
  }
}

.shrink-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.list-leave-active {
  position: absolute;
  right: 0;
}
</style>
